<template>
	<view class="contant">
		<image style="width: 129px; position: absolute; top: 2%; right: 12%" src="/static/img/23.png" mode="widthFix">
		</image>
		<view>
			<image class="avatar" style="width: 129px" :src="imageurl + imgs" mode="widthFix"></image>
		</view>
		<view class="tit">{{ tit }}</view>

		<view class="flex" style="padding-top: 42px;">
			<view class=""
				style="font-size: 14px;font-weight: 500;color: #333333;line-height: 18px;position: relative;">
				<view class="" style="position: relative;z-index: 2;">
					密码登录
				</view>
				<view class="" style="width: 42px;height: 5px;background: #FFE4D6;border-radius: 52px 52px 52px 52px;
				position: absolute;bottom: 3px;right: -5px;z-index: 1;">

				</view>
			</view>
			<view @click="register" class=""
				style="font-size: 14px;font-weight: 500;color: #666666;line-height: 18px;margin-left: 25px;">
				立即注册
			</view>
		</view>
		<u--input :adjustPosition="false" fontSize="16" v-model="phone" maxlength="11" type="number" placeholder="手机号"
			border="none" clearable></u--input>
		<u--input :adjustPosition="false" fontSize="16" v-model="password" type="password" placeholder="密码"
			border="none" clearable></u--input>
		<view class="flex" style="margin-top: 10px; justify-content: space-between">
			<view class="left flex">
				<view style="font-size: 12px; color: #8e9090">还没有账号？</view>
				<view @click="register" style="font-size: 12px; color: #2447FF">立即注册</view>
			</view>
			<view class="right">
				<view v-if="com_info.openSmsLogin == '1'" @click="smslogin" style="font-size: 12px; color: #2447FF">
					验证码快捷登陆
				</view>
			</view>
		</view>
		<view @click="login" class="flex" style="margin-top: 30px;justify-content: center;background-color: #2447FF;border-radius: 20px;
			height: 40px;font-size: 16px;color: #fff;">
			登录
		</view>
		<view class="flex" style="justify-content: space-between; margin-top: 15px; font-size: 14px">
			<!-- #ifdef H5 -->
			<view @click="down" style="color: #2447FF">下载app</view>
			<!-- #endif -->
			<view @click="resetting" style="color: #858787">忘记密码</view>
		</view>
		<view v-if="tabbar" class="flex" style="padding-top: 20px">
			<u-checkbox-group shape="circle">
				<u-checkbox :checked="true" @change="change" activeColor="#2447FF" v-model="checked"></u-checkbox>
			</u-checkbox-group>
			<view style="font-size: 14px; margin-left: 10px">
				登录并代表您已同意
				<text @click="nav(1)" style="color: #2447FF">《用户协议》</text>
				＆
				<text style="color: #2447FF" @click="nav(2)">《隐私协议》</text>
			</view>
		</view>
	</view>
</template>

<script>
	import config from '../../common/config/index.js';
	export default {
		data() {
			return {
				imageurl: config.imgurl,
				checked: true,
				phone: '', //手机号
				password: '', //密码
				imgs: '',
				tit: '',
				com_info: '',
				hide: true,
				tabbar: true,
				windowHeight: '',
			};
		},
		onShow() {
			// #ifdef H5
			let status = navigator.userAgent.toLowerCase();
			if (status.match(/MicroMessenger/i) == 'micromessenger') {
				this.auth();
			} else {}
			// #endif
		},
		onLoad(e) {
			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight;
				},
			});
			// uni.onWindowResize((res) => {
			// 	if (res.size.windowHeight < this.windowHeight) {
			// 		this.tabbar = false
			// 	} else {
			// 		this.tabbar = true
			// 	}
			// })
			if (e) {
				this.phone = e.phone;
			}
			this.arr_img();
			this.common();
		},
		methods: {
			showTabbar() {
				this.tabbar = true;
			},
			hideTabbar() {
				this.tabbar = false;
			},
			auth() {
				let d_url = window.location.href;
				let red_url = encodeURIComponent(d_url);
				this.wx_code = this.getUrlCode().code;
				let appid = 'wxf1322c2aa551e08c';
				if (this.wx_code == null || this.wx_code === '' || this.wx_code == undefined) {
					var wxUrl =
						'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' +
						appid +
						'&redirect_uri=' +
						red_url +
						'&response_type=code' +
						'&scope=snsapi_base' +
						'&state=STATE#wechat_redirect';
					window.location.href = wxUrl;
				} else {
					// let that = this;
					// uni.request({
					// 	url: that.purl + 'wechat.wechat/jingmo',
					// 	method: "POST",
					// 	header: {
					// 		token: ''
					// 	},
					// 	data: {
					// 		code: that.wx_code
					// 	},
					// 	success(res) {
					// 		console.log(res.data);
					// 		that.info = res.data.data
					// 		console.log(that.info);
					// 	},
					// 	complete(res) {
					// 		if (res.statusCode == 500) {
					// 			var url = window.location.href; //获取当前页面的url
					// 			if (url.indexOf("?") != -1) { //判断是否存在参数
					// 				url = url.replace(/(\?|#)[^'"]*/, ''); //去除参数
					// 				window.history.pushState({}, 0, url + '#/pages/me/reg_shanghu/reg_shanghu');
					// 				that.auth()
					// 			}
					// 		}
					// 	},
					// })
				}
			},
			getUrlCode() {
				// 截取url中的code方法
				var url = window.location.href; //获取打开的公众号的路径
				let winUrl = url;
				var theRequest = new Object();
				if (url.indexOf('?') != -1) {
					var str = url.substr(url.indexOf('?') + 1);
					var strs = str.split('&');
					for (var i = 0; i < strs.length; i++) {
						var items = strs[i].split('=');
						theRequest[strs[i].split('=')[0]] = strs[i].split('=')[1];
					}
				} else {}
				return theRequest;
			},
			async common() {
				let res = await this.$http.index.index();
				if (res.code == 1) {
					this.com_info = res.data;
				}
			},
			down() {
				// #ifdef H5
				window.location.href = this.com_info.applink;
				// #endif
				// #ifdef APP-PLUS
				plus.runtime.openURL(this.com_info.applink);
				// #endif
			},
			change(e) {
				this.checked = e;
			},
			async login() {
				if (!this.checked) {
					this.$tips('请先同意协议');
					return;
				}
				if (this.phone == '' || this.phone == null) {
					uni.showToast({
						icon: 'none',
						title: '请先填写账号',
					});
					return false;
				}
				if (this.password == '') {
					uni.showToast({
						icon: 'none',
						title: '请先填写密码',
					});
					return false;
				}
				let res = await this.$http.index.login({
					mobile: this.phone,
					password: this.password,
					code: this.wx_code,
				});
				if (res.code == 1) {
					this.$tips('登录成功');
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/index/index',
						});
					}, 1000);
					let token = res.data.userinfo.token;
					uni.setStorageSync('token', token);
				} else {
					this.$tips(res.msg);
				}
			},
			async arr_img() {
				let res = await this.$http.index.login_img({});
				console.log(res);
				this.imgs = res.data.logo;
				this.tit = res.data.slogan;
			},
			nav(i) {
				switch (i) {
					case 1:
						uni.navigateTo({
							url: '/pages/me/agreement',
						});
						break;
					case 2:
						uni.navigateTo({
							url: '/pages/me/privacy',
						});
						break;
				}
			},

			register() {
				uni.navigateTo({
					url: 'register',
				});
			},
			//重置密码
			resetting() {
				uni.navigateTo({
					url: '/pages/login/resetting',
				});
			},
			smslogin() {
				uni.navigateTo({
					url: '/pages/login/smslogin',
				});
			},
		},
	};
</script>

<style scoped lang="scss">
	.flex {
		display: flex;
		align-items: center;
	}

	.contant {
		background-image: url('@/static/font/57.png');
		background-repeat: no-repeat;
		background-size: cover;
		// height: 100vh;
		padding: 104px 30px 0px;

		.avatar {
			width: 60px;
			// height: 60px;
			border-radius: 15px;
			// background-color: #f00;
		}

		.tit {
			font-size: 20px;
			font-weight: bold;
			color: #1d1f20;
			margin-top: 15px;
		}

		.u-input {
			padding: 15px !important;
			background-color: #fff;
			border-radius: 10px;
			margin-top: 15px;
		}

		.input-placeholder {
			font-size: 16px !important;
		}
	}
</style>